<template>
  <div class="update_email_page">
    <CommonHeader title="更改邮箱验证" />
    <div class="update_email_content page_no_tab_bar">
      <!-- 旧邮箱验证码 -->
      <div class="input_box">
        <div class="input_label">将发送验证码到您的旧邮箱地址</div>
        <div class="input input_psw">
          <input placeholder="请输入邮箱验证码" v-model="ruleForm.oldCode" />
          <div class="is_open add_text" @click="getCode(1)">
            {{ curTime1 ? `${curTime1}s` : "发送验证码" }}
          </div>
        </div>
        <div class="input_rule">{{ rules.oldCode.rule }}</div>
      </div>
      <!-- 新邮箱地址 -->
      <div class="input_box">
        <div class="input_label">新邮箱地址</div>
        <div class="input input_psw">
          <input placeholder="请输入新的邮箱地址" v-model="ruleForm.newEmail" />
        </div>
        <div class="input_rule">{{ rules.newEmail.rule }}</div>
      </div>
      <!-- 新邮箱验证码 -->
      <div class="input_box">
        <div class="input_label">将发送验证码到您的新邮箱地址</div>
        <div class="input input_psw">
          <input placeholder="请输入邮箱验证码" v-model="ruleForm.newCode" />
          <div class="is_open add_text" @click="getCode(2)">
            {{ curTime2 ? `${curTime2}s` : "发送验证码" }}
          </div>
        </div>
        <div class="input_rule">{{ rules.newCode.rule }}</div>
      </div>
      <!-- 操作按钮 -->
      <div class="operate_btn" @click="onConfirm">确认</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { ElMessage } from "element-plus";

// 倒计时变量
const curTime1 = ref(0); // 倒计时
const curTime2 = ref(0); // 倒计时
const isFlag1 = ref(true); // 控制频繁发送
const isFlag2 = ref(true); // 控制频繁发送
// 表单数据
const ruleForm: any = ref({
  oldEmail: "",
  oldCode: "",
  newEmail: "",
  newCode: "",
});
// 表单验证
const rules: any = reactive({
  oldCode: {
    msg: "请输入旧的邮箱验证码",
    rule: "",
  },
  newEmail: {
    msg: "请输入邮箱",
    msg2: "邮箱格式不正确",
    reg: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-.][a-zA-Z0-9]+)*\.[a-zA-Z]{2,6}/,
    rule: "",
  },
  newCode: {
    msg: "请输入新的邮箱验证码",
    rule: "",
  },
});

// 获取验证码
const getCode = (curTimer: number) => {
  if (curTimer == 1) {
    if (curTime1.value) return;
    if (!isFlag1.value) return ElMessage.error("请勿频繁请求！");
    isFlag1.value = false;
  } else {
    if(!ruleForm.value.newEmail) return ElMessage.error("请先输入新的邮箱地址")
    if (curTime2.value) return;
    if (!isFlag2.value) return ElMessage.error("请勿频繁请求！");
    isFlag2.value = false;
  }

  setTimeout(() => {
    if (curTimer == 1) {
      downCount(1);
    } else {
      downCount(2);
    }
  }, 3000);

  // 请求邮箱验证码
  // sendEmail({ email: ruleForm.value.email, useTo: "2" }).then((res: any) => {
  //   downCount();
  //   ElMessage.success("获取验证码成功，请注意您的邮箱！");
  // });
};
// 确认
const onConfirm = () => {
  if (validateForm()) {
    ElMessage.success("更改邮箱验证成功！");
  }
};

// 表单验证
const validateForm = () => {
  for (let k in rules) {
    // 验证是否为空
    if (ruleForm.value[k].trim() == "") {
      rules[k].rule = rules[k].msg;
      return false;
    }
    // 正则验证
    if (rules[k].reg) {
      if (!rules[k].reg.test(ruleForm.value[k])) {
        rules[k].rule = rules[k].msg2;
        return false;
      }
    }
  }
  for (let k in rules) {
    rules[k].rule = "";
  }
  return true;
};

// 验证码倒计时
const downCount = (curTimer: number) => {
  let num = 60;
  if (curTimer == 1) {
    curTime1.value = num;
  } else {
    curTime2.value = num;
  }
  let timer = setInterval(() => {
    if (num < 1) {
      clearInterval(timer);
      if (curTimer == 1) {
        isFlag1.value = true;
      } else {
        isFlag2.value = true;
      }
    } else {
      num--;
      if (curTimer == 1) {
        curTime1.value = num;
      } else {
        curTime2.value = num;
      }
    }
  }, 1000);
};
</script>

<style lang="scss" scoped>
.update_email_page {
  .update_email_content {
    padding-top: 10px;
    .operate_btn {
      margin-top: 50px;
    }
  }
}
</style>
